<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div v-show="store.rightDrawer" class="right-property"
    :class="{ 'expanded': rightDrawerExpanded, 'viewExperiment': viewExperiment }">
    <div class="drawer-head">
      <div class="head-container">
        <span class="head-title">{{ headTitle }}</span>
        <el-tag v-if="isOldNode" type="success">有更新</el-tag>
      </div>
      <div class="right-button-group">
        <el-tooltip class="item" effect="dark" :content="(rightDrawerExpanded ? '折叠' : '展开') + ''" placement="top">
          <el-button class="fold-button" type="text" @click="updateDrawerExpanded">
            <svg-icon :icon-class="rightDrawerExpanded ? 'spread-copy' : 'fold-left'" />
          </el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="'关闭 (Esc)'" placement="top">
          <el-button class="close-button" type="text" @click="rightDrawerClose()">
            <svg-icon icon-class="guanbi" />
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <operator-info v-if="store.selectedId" ref="operatorInfoRef" :right-drawer-expanded="rightDrawerExpanded"
      @updateDrawerExpanded="updateDrawerExpanded" @updateHeadInfo="updateHeadInfo" />
    <canvas-workflow-info v-else ref="canvasWorkflowInfo" :right-drawer-expanded="rightDrawerExpanded"
      @updateDrawerExpanded="updateDrawerExpanded" @updateHeadTitle="updateHeadTitle" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch, provide } from "vue"
import { designerStore } from 'src/stores/designerTool/designerTool'
import Mousetrap from 'mousetrap'
import OperatorInfo from './operatorInfo.vue'
import CanvasWorkflowInfo from './canvasWorkflowInfo.vue'
const rightDrawerExpanded = ref(false)
const headTitle = ref('')
const isOldNode = ref(false)
const store = designerStore()
const operatorInfoRef = ref<any>(null)
const canvasWorkflowInfo = ref<any>(null)

const viewExperiment = computed(() => {
  return !!store.experimentId || !!store.flowReadonlyId
})

watch(() => store.selectedId, (newData, oldData) => {
  if (!newData) {
    rightDrawerExpanded.value = false
  }
})
watch(() => store.rightDrawer, (newData, oldData) => {
  if (newData) {
    rightDrawerExpanded.value = false
  }
})
watch(() => store.rightDrawerTabType, (newData, oldData) => {
  if (newData) {
    if (store.selectedId) {
      if (store.rightDrawer) {
        switchOperatorInfoActiveName(newData)
      } else {
        nextTick(() => {
          operatorInfoRef.value.openContextMenuDialog(newData)
        })
      }
    } else {
      if (store.rightDrawer) {
        switchCanvasWorkflowInfoActiveName(newData)
      } else {
        nextTick(() => {
          canvasWorkflowInfo.value.openContextMenuDialog(newData)
        })
      }
    }
    store.SET_RIGHT_DRAWER_TAB_TYPE('')
  }
})
watch(() => store.events.initEvent.index, (newData, oldData) => {
  initEvent()
})

function initEvent() {
  if (!viewExperiment.value) {
    Mousetrap.bind('ctrl+i', () => {
      switchCanvasWorkflowInfoActiveName('canvas')
      return false
    })
    Mousetrap.bind('ctrl+j', () => {
      switchCanvasWorkflowInfoActiveName('workflow')
      return false
    })
  }
  Mousetrap.bind('ctrl+l', () => {
    if (store.selectedId) {
      store.SET_RIGHT_DRAWER_TAB_TYPE('runLog')
    } else if (!viewExperiment.value) {
      store.SET_RIGHT_DRAWER_TAB_TYPE('workflowLog')
    }
    return false
  })
  Mousetrap.bind('ctrl+g', () => {
    if (store.selectedId) {
      store.SET_RIGHT_DRAWER_TAB_TYPE('runResult')
    }
    return false
  })
  Mousetrap.bind('ctrl+m', () => {
    if (store.selectedId) {
      store.SET_RIGHT_DRAWER_TAB_TYPE('model')
    }
    return false
  })
  Mousetrap.bind('ctrl+h', () => {
    if (store.selectedId) {
      store.SET_RIGHT_DRAWER_TAB_TYPE('artifact')
    }
    return false
  })
  Mousetrap.bind('ctrl+d', () => {
    if (store.selectedId) {
      store.SET_RIGHT_DRAWER_TAB_TYPE('data')
    }
    return false
  })
  Mousetrap.bind('esc', () => {
    store.SET_RIGHT_DRAWER(!store.rightDrawer)
    return false
  })
}
function rightDrawerClose() {
  store.SET_RIGHT_DRAWER(false)
}
function updateDrawerExpanded(val: boolean) {
  rightDrawerExpanded.value=!rightDrawerExpanded.value
  // rightDrawerExpanded.value = void 0 === val ? !rightDrawerExpanded.value : val
}
function updateHeadInfo(nodeData: any) {
  updateHeadTitle(nodeData.label, nodeData.isOldNode || false)
}
function updateHeadTitle(headTitle: any, isOldNode: any) {
  headTitle.value = headTitle
  isOldNode.value = isOldNode
}
function switchCanvasWorkflowInfoActiveName(activeName: any) {
  store.SET_RIGHT_DRAWER(true)
  rightDrawerExpanded.value = false
  store.SET_SELECTED_ID('')
  nextTick(() => {
    canvasWorkflowInfo.value.activeName = activeName
    canvasWorkflowInfo.value.handleClick()
  })
}
function switchOperatorInfoActiveName(activeName: any) {
  nextTick(() => {
    operatorInfoRef.value.parentUpdateStoragesState(activeName)
  })
}
</script>

<style lang="scss" scoped>
.right-property {
  background: white;
  overflow: hidden;
  position: absolute;
  top: 68px;
  z-index: 100;
  right: 0;
  width: 300px;
  transition: .1s;
  height: calc(100vh - 96px);
  border: 1px solid #dcdee2;
  margin: 14px;
  padding: 8px;

  &.viewExperiment {
    height: calc(100vh - 28px);
    top: 0;
  }

  .drawer-head {
    display: flex;
    height: 36px;
    align-items: center;

    .head-container {
      flex: 1;
      width: calc(100% - 42px);
      display: flex;
      align-items: center;

      .head-title {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .el-tag {
        margin: 0 6px;
      }
    }

    .el-button {
      color: #606266;
      padding: 0;
    }
  }

  &.expanded {
    width: calc(100% - 28px);
    height: calc(100vh - 96px);
    z-index: 101;

    .drawer-head {
      padding: 0 10px;
    }

    .canvas-workflow-info,
    .operatorInfo {
      padding: 0 12px;

      ::v-deep.interval-container {
        padding: 8px 0;

        &.interval-parameter {
          max-width: 340px;
          padding-right: 8px;
        }
      }
    }

    &.viewExperiment {
      height: calc(100vh - 28px);
    }
  }
}
</style>
